/**
 * 我的订单
 * **/
import Account from '../../layouts/Account'
import { getOrder } from '../../api/order'
import { useEffect, useState } from 'react'
import { Button, Pagination, Spin } from 'antd'
import './index.scss'
export default () => {
    /**
     * 默认选中第一个
     * **/
    const [active, setActive] = useState(0)
    /**
     * loading
     * **/
    const [spin,setSpin]=useState(false)
    /**
     * tab切换表头
     * **/
    const tabCut = ['全部订单', '待付款', '代发货', '待收货', '待评价', '已完成', '已取消']
    /**
     * 存放订单数据
     * **/
    const [order, setOrder] = useState([])
    /**
     * 订单模型
     * **/
    const [pageModel, setPageModel] = useState({
        page: 1,
        pageSize: 5,
        orderState: 2
    })
    /**
     * 跳转
     * **/
    const onChange = (page, pageSize) => {
        setPageModel(
            {
                page,
                pageSize,
                orderState: 2
            }
        )

    }
    useEffect(() => {
        getOrderList()
    }, [pageModel])
    /**
     * tab切换
    */
    const changes = (index) => {
        console.log(index);
        setActive(index)
        getOrderList()
    }
    /**
  * 总数量
  * **/
    const [count, setCount] = useState(0)
    /**
     * 获取订单数据
     * **/
    const getOrderList = async () => {
        try {
            setSpin(true)
            const data = await getOrder(pageModel)
            setOrder(data.items)
            setCount(data.counts)
            
        } catch (error) { }
        setSpin(false)
    }
    useEffect(() => {
        getOrderList()
      
    }, [])
    /**
     * 分页箭头变成上一页下一页
     * **/
    function itemRender(current, type, originalElement) {
        if (type === 'prev') {
            return <a>上一页</a>;
        }
        if (type === 'next') {
            return <a>下一页</a>;
        }
        return originalElement;
    }

    return (
        <div className="order">
            <Account>
                <Spin  spinning={spin}>
                <div className="content">
                    <dl>
                        {tabCut.map((item, index) => <li className={index == active ? 'actives' : ''} key={item} onClick={() => changes(index)}>{item} </li>)}
                    </dl>

                    {
                        order.map((item, index) => <div className="order-info">
                            <div className="order-top">
                                <div className="order-left">
                                    <p>下单时间:{item.createTime}</p>
                                    <p>订单编号:{item.id}</p>
                                </div>
                                <div className="order-right">
                                    <p>付款截至:59分58秒</p>
                                </div>
                            </div>
                            <div className="order-content">
                                {
                                    item.skus.map((skus =>
                                        <div className='skus'>
                                            <img src={skus.image} alt="" />
                                            <div className='name'>
                                                <p>{skus.name}</p>
                                                <p>{skus.attrsText}</p>
                                            </div>
                                            <div>￥{skus.realPay}</div>
                                            <div>{skus.quantity}</div>
                                            <div>{item.orderState == 1 ? '待付款' : item.orderState == 2 ? '代发货' : item.orderState == 3 ? '待收货' : item.orderState == 4 ? '待评价' : item.orderState == 5 ? '已完成' : item.orderState == 6 ? '已取消' : '全部'}</div>

                                            <div>
                                                <p className='price'>￥{item.payMoney}</p>
                                                <p>(含运费:￥{item.postFee})</p>
                                                <p>在线支付</p>
                                            </div>
                                            <div>
                                                <Button type='primary' style={{ background: '#27ba9b' }} shape='round'>立即付款</Button>
                                                <p>查看详情</p>
                                                <p>取消订单</p>
                                            </div>
                                        </div>
                                    ))
                                }

                            </div>
                        </div>)
                    }
                    <Pagination
                        defaultCurrent={1}
                        defaultPageSize={5}
                        pageSizeOptions={[5, 10, 20, 30]}
                        total={count}
                        itemRender={itemRender}
                        onChange={onChange}
                    />
                </div>
                </Spin>
            </Account>

        </div>
    )
}